<!doctype html>
<html lang="zh-CN">

<head>
    <!-- 必须的 meta 标签 -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap 的 CSS 文件 -->
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <link rel="stylesheet" href="../css/font-awesome.min.css">
    <link rel="stylesheet" href="../css/fonts/fontawesome-webfont.woff">
    <link rel="stylesheet" href="../css/fonts/fontawesome-webfont.woff2">

    <title>校园通信息系统</title>

    <style>
        html {
            height: 100%;
        }
        
        body {
            height: 100%;
        }
        
        #app {
            width: 100%;
            height: 100%;
            /*定义为一个flex盒子*/
            display: flex;
            /*内部元素按行排列*/
            flex-direction: row;
            min-width: 700px;
            min-height: 600px;
            /* 主轴居中 */
            justify-content: center;
        }
        
        form {
            width: 30%;
            padding: 10px 30px;
            min-width: 450px;
        }
        
        .selectOption {
            height: 30px;
            border-radius: 10px;
        }
    </style>
</head>

<body>
    <div id="app">
        <form>
            <div class="form-group">
                <label for="Input1">商品名称</label>
                <input v-model="form.name" class="form-control" id="Input1" placeholder="请输入商品名称">
            </div>
            <div class="form-group">
                <label for="Input2">商品价格</label>
                <input v-model="form.price" type="number" class="form-control" id="Input2" placeholder="请输入商品价格">
            </div>
            <div class="form-group">
                <label for="Input3">商品描述</label>
                <textarea v-model="form.desc" class="form-control" id="Input3" rows="3" placeholder="请输入商品描述"></textarea>
            </div>
            <div class="form-group">
                <label for="Input4">商品图片</label>
                <input v-model="form.photo" type="text" class="form-control" id="Input4">
            </div>
            <div class="form-group">
                <label for="select">商品标签</label>
                <select v-model="form.tag" class="form-control" id="select" placeholder="请选择商品标签">
                  <option class="selectOption">书籍</option>
                  <option>衣物</option>
                  <option>电子产品</option>
                  <option>体育用品</option>
                  <option>食品饮料</option>
                  <option>美妆护肤</option>
                  <option>日常其他</option>
                </select>
            </div>
            <button type="button" class="btn btn-primary " @click="submit" style="width:100%">提交</button>
        </form>

    </div>
    <!-- 选项 1：jQuery 和 Bootstrap 集成包（集成了 Popper） -->
    <script src="../js/jquery-3.6.0.slim.min.js"></script>
    <script src="../js/bootstrap.bundle.min.js"></script>
    <script src="../js/vue.global.js"></script>
    <!-- <script src="https://unpkg.com/vue"></script> -->
    <script src="../js/axios.min.js"></script>
    <script src="../js/request.js"></script>
    <script src="../layer/layer.js"></script>

    <script>
        const app = {
            data() {
                return {
                    form: {
                        name: undefined,
                        price: undefined,
                        desc: undefined,
                        photo: undefined,
                        tag: undefined
                    },
                    loadIdx: null
                }
            },
            methods: {

                login() {
                    this.loadIdx = layer.load();
                    request.post('/login', this.user).then(res => {
                        layer.close(this.loadIdx);
                        if (res.data.success) {
                            layer.msg('登陆成功!', {
                                icon: 1,
                                time: 800
                            }, () => {
                                // 闪完后跳转
                                // window.location.href = 'home.html';
                            });
                        } else {
                            layer.msg(res.data.message, {
                                icon: 2,
                                time: 1500
                            });
                        }
                    }).catch(err => {

                    })
                },
                submit() {
                    console.log(this.form);
                }
            },
        };
        Vue.createApp(app).mount('#app')
    </script>
</body>

</html>